<template>
  <div>
    <!-- 搜索页面 -->
    <div class="search-box">
      <div class="top">
        <input
          v-model="value"
          placeholder=""
          @keyup.enter="addHistory"
          class="int"
        />
        <span class="del" @click="$router.go(-1)">取消</span>
        <span class="iconfont icon-31sousuo"></span>
      </div>
      <!-- <van-cell-group v-if="value">
        <van-cell
          v-for="item in list"
          :key="item.id"
          :value="item.artists[0].name"
          clickable
          center
          @click="setId(item.id)"
        >
        <template #icon>
          <van-icon name="search" size="24px"/>
        </template>
         <template #title>
          <span style="display: inline-block;;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width: 180px">{{item.name}}</span>
        </template>
        </van-cell>
      </van-cell-group> -->
      <ul>
        <li v-for="item in list" :key="item.id" @click="setId(item.id)">
          <h3 class="songName">{{ item.artists[0].name }}</h3>
          <div class="atName">{{ item.name }}</div>
        </li>
      </ul>
      <div class="history">
        <div class="title"><div>历史记录</div><div><van-icon name="delete-o" @click="delHistory"/></div></div>
       <div class="search-list1">
        <router-link v-for="(item, index) in history" :key="index+'hs'" :to="'/searchData?value='+item" tag="div">
          {{ item }}
        </router-link>
      </div>
        <div class="title">热门搜索</div>
      </div>
      <div></div>
      <div class="search-list1">
        <router-link v-for="(item, index) in DataList" :key="index" :to="'/searchData?value='+item.first" tag="div">
          {{ item.first }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { getSearchList, getSearch } from "../api/search";
export default {
  data() {
    return {
      show: false,
      value: "",
      DataList: null,
      getTopMv: null,
      flg: true,
      list: null,
      homeShow: false,
      history:['aa','bb']
    };
  },
  methods: {
    // 调用父组件方法播放音乐
    setId(id) {
      this.$emit("get-player-id", id);
      this.$emit("get-play-all-id", this.$route.query.id); //传递歌单id
    },
    delHistory() {
      this.history=[]
    },
    addHistory(){
      this.$router.push({path:'/searchData',query: { value:this.value}})
    }
  },
  created() {
    getSearchList().then((data) => {
      this.DataList = data.result.hots;
      console.log(data);
    });
  },

  watch: {
    value() {
      getSearch({
        keywords: this.value,
      }).then((data) => {
        this.list = data.result.songs;
        console.log(data);
      });
    },
  },
};
</script>

<style lang="less">
.search-box {
  padding: 0 10px;
  background-image: linear-gradient(#ededeee8, #fff);
  height: 700px;
  // position: relative;
  ul {
    li {
      margin: 10px 0;
      .songName {
        font-size: 0.26rem;
        font-weight: 400;
        color: rgba(26, 26, 26, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .atName {
        margin-top: 5px;
        font-size: 0.16rem;
        color: rgba(26, 26, 26, 0.5);
        font-weight: 300;
      }
    }
  }
  .top {
    padding: 15px 0;
    position: relative;
    .icon-31sousuo {
      position: absolute;
      font-size: 20px;
      right: 80px;
      top: 22.5px;
      color: #969799;
    }
    .int {
      width: 75%;
      border: none;
      height: 35px;
      border-radius: 15px;
      padding: 0 10px;
      font-size: 14px;
    }
    .del {
      margin-left: 34px;
      color: rgba(26,26,26,1);
      font-weight: 400;
    }
  }
  .van-search {
    background-color: #fff;
  }
  .del-btn {
    position: absolute;
    left: 0px;
    top: 16px;
  }
  .com {
    color: rgb(247, 57, 57);
  }
  .search-list1 {
    margin-top: 15px;
    display: flex;
    // flex-grow: 2;
    flex-wrap: wrap;
    border-radius: 6px;
    overflow: hidden;
    div {
      background-color: rgba(255, 253, 253, 0.575);
    padding: 5px 12px;
    border-radius: 17px;
    color: rgba(26, 26, 26, 0.918);
    font-size: 14px;
    margin: 8px;
    }
  }
  .history {
    .title {
      white-space: nowrap;
      margin: 15px 0;
      display: flex;
      justify-content: space-between;
    align-items: center;
    }
    .lits {
      margin-bottom: 15px;
      span {
        background-color: #fff;
         padding: 5px 12px;
        display: inline-block;
        margin: 5px;
        border-radius: 10px;
        font-size: 14px;
        color: rgba(26,26,26,1);
      }
    }
  }
}
</style>